<template>
	<!-- 已登录 -->
	<div v-if="isLogin">
		<!-- 用户信息 -->
		<van-cell center class="member" :class="{ 'has-avatar': avatar }">
			<template #icon>
				<van-image :src="avatar" width="80px" round v-if="avatar" />
				<van-image :src="avatar_default" width="80px" v-else />
			</template>
			<template #title>
				<span class="title">{{ user.name }}</span>
			</template>
		</van-cell>
		<!-- 用户可操作功能列表 -->
		<div class="function-list">
			<van-cell v-for="(item, i) of cellItems" :key="i" :icon="item.img" :title="item.title" is-link
				:to="{ name: item.name }" class="function-item" />
		</div>
		<van-cell @click="onClickLogout" icon="user-o" title="退出登录" is-link class="logout-item" />
	</div>
	<!-- 未登录 -->
	<div v-else>
		<!-- 用户信息 -->
		<van-cell center class="member" is-link to="login">
			<template #icon>
				<van-image :src="avatar_default" width="80px" />
			</template>
			<template #title>
				<span class="title">登录 / 注册</span>
			</template>
		</van-cell>
	</div>
</template>

<script>
	// Vue3 + vite 加载图片资源
	import avatar_default from "@/assets/images/avatar_default.png";
	import {
		getTokenLocal,
		getUserLocal,
		removeTokenLocal,
	} from "@/utils/auth.js";
	import {
		getDetailByIdAPI
	} from "@/api/user.js";
	import {
		showToast
	} from "vant";
	export default {
		data() {
			return {
				user: {},
				avatar_default: avatar_default,
				avatar: "",
				isLogin: false,
				cellItems: [{
						title: "我的订单",
						name: "orderList",
						img: "orders-o",
					},
					{
						title: "收货地址",
						name: "addressList",
						img: "envelop-o",
					},
					{
						title: "我的收藏",
						name: "myFavorites",
						img: "point-gift-o",
					},
					{
						title: "个人资料",
						name: "profile",
						img: "user-o",
					},
					{
						title: "修改密码",
						name: "updatePwd",
						img: "records",
					},
				],
			};
		},

		//初始页面数据
		mounted() {
			this.user = getUserLocal();
			this.avatar = this.avatar_default;

			//判断是否用户登录，看Token是否为空
			let token = getTokenLocal();
			this.isLogin = token ? true : false;

			if (this.isLogin) {
				getDetailByIdAPI(this.user.id).then((result) => {
					this.avatar = this.APIDomainName + result.data.avatar;
				}).catch(() => {});
			}
		},

		methods: {
			//点击用户退出事件
			onClickLogout() {
				removeTokenLocal();
				this.avatar = this.avatar_default;
				showToast("退出成功");
				this.isLogin = false;
			},
		},
	};
</script>

<style lang="less" scoped>
	.member {
		margin-top: 15px;
		padding: 10px;
		background: linear-gradient(90deg, #28a2ff, #ffd787);
		box-shadow: 0 0.1rem 0.25rem #f8e3c6;
		border-radius: 10px;
		transition: all 0.3s ease;

		&:hover {
			transform: translateY(-2px);
			box-shadow: 0 0.2rem 0.5rem #f8e3c6;
		}

		&.has-avatar {
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.title {
		padding-left: 20px;
		font-size: 24px;
		color: rgb(65, 16, 241);
	}

	.function-list {
		margin-top: 15px;
		border-radius: 10px;
		box-shadow: 0 0.1rem 0.25rem #f8e3c6;
		overflow: hidden;
	}

	.function-item {
		padding: 15px;
		font-size: 18px;
		color: #333;
		border-bottom: 1px solid #e0e0e0;
		transition: all 0.3s ease;

		&:last-child {
			border-bottom: none;
		}

		&:hover {
			background-color: #f5f5f5;
		}
	}

	.logout-item {
		margin-top: 15px;
		padding: 15px;
		font-size: 18px;
		color: #333;
		border-radius: 10px;
		box-shadow: 0 0.1rem 0.25rem #f8e3c6;
		transition: all 0.3s ease;

		&:hover {
			background-color: #f5f5f5;
		}
	}
</style>